<template>
    <div id="layoutNav" class="layout-nav">
        <div class="nav-block"></div>
        <div class="nav-list">
            <ul content="nav-list">
                <li @click.stop.prevent="nav('home')" :class="{'active':currentNav=='home'}">
                    <span class="icon icon-home"></span>
                    <p>首页</p>
                </li>
                <li @click.stop.prevent="nav('discover')" :class="{'active':currentNav=='discover'}">
                    <span class="icon icon-product"></span>
                    <p>发现</p>
                </li>
                <li @click.stop.prevent="nav('person')" :class="{'active':currentNav=='person'}">
                    <span class="icon icon-mine"></span>
                    <p>我的</p>
                </li>
            </ul>
        </div>
    </div>
</template>


<script>
    export default {
        data ()
        {
            return {}
        },
        methods: {
            nav(routeName)
            {
                this.$router.replace({name:routeName});
            }
        },
        computed:
            {
                currentNav()
                {
                    return this.$route.name;
                }
            }
    }
</script>

<style lang="less" scoped>
    // @import "../../style/var";

    .layout-nav
    {

        > .nav-block
        {
            padding-bottom: 112px;
        }

        > .nav-list
        {

            position: fixed;
            z-index: 9;
            left: 0;
            right: 0;
            bottom: 0;
            background: #fff;
            padding: 5px;

            > ul
            {
                border-top: 1px solid #2b2b2b;
                padding-top: 2px;
                list-style: none;
                display: flex;
                flex-direction: row;
                flex-wrap: wrap;
                justify-content: space-around;
                margin: 0;
                > li
                {
                    text-align: center;
                    font-size: 10px;
                    color: #999;

                    > .icon
                    {
                        display: block;
                        width: 25px;
                        height: 25px;
                        margin: 0 auto;

                        &.icon-home
                        {
                            background-image: url("../../assets/img/tabs/home.png");
                            background-size: contain;
                        }

                        &.icon-product
                        {
                            background-image: url("../../assets/img/tabs/discover.png");
                            background-size: contain;
                        }

                        &.icon-mine
                        {
                            background-image: url("../../assets/img/tabs/mine.png");
                            background-size: contain;
                        }

                    }

                    > p
                    {
                        margin: 4px 0 0 0;
                    }

                    &.active
                    {
                        color: blue;

                        > .icon
                        {
                            &.icon-home
                            {
                                background-image: url("../../assets/img/tabs/home-active.png");
                            }

                            &.icon-product
                            {
                                background-image: url("../../assets/img/tabs/discover-active.png");
                            }

                            &.icon-mine
                            {
                                background-image: url("../../assets/img/tabs/mine-active.png");
                            }

                        }
                    }
                }
            }
        }

    }
</style>